<template>

  <lay-layer v-model="layerRef.open"
             :title="layerRef.title"
             :area="layerRef.area"
             :shade-close="layerRef.shadeClose"
             :maxmin="layerRef.maxmin">

    <lay-container fluid="true" class="fly-container">
      <lay-card v-auth="['admin:dict:data:query']" class="fly-search-card">
        <lay-form size="sm">
          <lay-form-item label="字典标签" prop="dictLabel" mode="inline">
            <lay-input v-model="queryDictDataParams.dictLabel"></lay-input>
          </lay-form-item>
          <lay-form-item label="有效标志" prop="validFlag" mode="inline">
            <lay-select v-model="queryDictDataParams.validFlag">
              <lay-select-option value="" label="全部"></lay-select-option>
              <lay-select-option value="Y" label="有效"></lay-select-option>
              <lay-select-option value="N" label="无效"></lay-select-option>
            </lay-select>
          </lay-form-item>
          <lay-form-item mode="inline">
            <lay-button class="fly-button fly-button-search" type="primary" size="sm"
                        @click=" reloadDictDataDate(1, flyLayPage.limit) ">
              <lay-icon class="layui-icon-search"></lay-icon>
              查询
            </lay-button>
          </lay-form-item>
        </lay-form>

      </lay-card>


      <!-- table   :default-toolbar="true"  :height="'100%'" line row nob -->
      <div class="fly-table-box">
        <lay-table :page="false"
                   :columns=" dictDataColumns "
                   :loading=" tableDictDataData.loading "
                   :data-source=" tableDictDataData.rows "
                   @change=" reloadDictDataDate ">

          <template v-slot:toolbar>
            <lay-button v-auth="['admin:dict:data:save']" size="sm" type="primary" class="fly-button fly-toolbar-addition" @click=" onTapDictDataAdd ">
              <lay-icon class="layui-icon-addition"></lay-icon>
              新增
            </lay-button>
          </template>

          <template v-slot:operator="{ row }">
            <lay-button v-auth="['admin:dict:data:view']" size="sm" type="primary" class="fly-button fly-view-button" @click=" onTapDictDataView(row) ">
              <lay-icon class="layui-icon-list"></lay-icon>
              查看
            </lay-button>
            <lay-button v-auth="['admin:dict:data:update']" size="sm" type="primary" class="fly-button fly-edit-button" @click=" onTapDictDataEdit(row) ">
              <lay-icon class="layui-icon-edit"></lay-icon>
              编辑
            </lay-button>

<!--            <lay-button v-auth="['admin:dict:data:delete']" size="sm" type="danger" class="fly-button fly-remove-button"-->
<!--                        @click=" removeDictDataHandler(row.id) ">-->
<!--              <lay-icon class="layui-icon-delete"></lay-icon>-->
<!--              删除-->
<!--            </lay-button>-->

          </template>
        </lay-table>


        <lay-page v-model="flyLayPage.page"
                  v-model:limit="flyLayPage.limit"
                  :layout="flyLayPage.layout"
                  :pages="flyLayPage.pages"
                  :limits="flyLayPage.limits"
                  theme="blue"
                  :total=" tableDictDataData.total"
                  @change="previousNextPage" style="margin-top: 15px"></lay-page>

      </div>
    </lay-container>


  </lay-layer>

  <RefDictData ref="refDictDataComponent"/>

</template>


<script setup lang="ts" name="dictDataComponent">
import {ref, reactive, onMounted} from 'vue';
import RefDictData from './RefDictData.vue';

import useDictDataComposable from '@/composables/admin/DictDataComposable';
import {DictType} from "@/api/admin/model/DictTypeModel";

const {
  dictType,
  refDictDataComponent,
  flyLayPage,
  tableDictDataData,
  dictDataColumns,
  queryDictDataParams,

  /* 加载表格 */
  reloadDictDataDate,
  loadTableDictDataData,

  /* 新增, 编辑, 查看按钮 */
  onTapDictDataAdd,
  onTapDictDataEdit,
  onTapDictDataView,

  /* 接口 */
  removeDictDataHandler
} = useDictDataComposable();


/* 弹窗 */
const layerRef = reactive<any>({
  open: false,
  title: '数据字典信息表',
  area: ['98%', '98%'], // 宽度,  高度
  disabled: false,
  shadeClose: false,
  maxmin: false,
  submit: true,
})


/**
 * 上一页, 下一页
 * @param current
 * @param limit
 */
const previousNextPage = ({current = 1, limit = 10}) => {
  queryDictDataParams.page = current;
  queryDictDataParams.limit = limit;
  reloadDictDataDate(1, flyLayPage.limit);
}

//显示弹框
const open = (type: DictType) => {
  layerRef.title = '【' + type.dictLabel + '】数据字典';
  queryDictDataParams.typeId = type.id;
  reloadDictDataDate(1, flyLayPage.limit);
  dictType.value = type;
  layerRef.open = true;
};


/**
 * 关闭按钮
 */
const onTapClose = () => {
  layerRef.open = false;
}


//在组件中，属性和方法，只能对当前template,
//外部需要使用的时候，需要使用 defineExpose 暴露出去给父组件
defineExpose({
  open,
  onTapClose
});


</script>


<style scoped>

</style>